<template>
	<view >
		<p-navbar title="钱包记录" ></p-navbar>
		<view class="hq flex align-items" >
			<!-- <view>{{type=='1'?'提币记录':type=='2'?'充币记录':type=='4'?'会员记录':'互转记录'}}</view> -->
			<view class="" @tap="type=1" :class="type=='1'&&'c-show'">
				提币记录
			</view>
			<view class="" @tap="type=2" :class="type=='2'&&'c-show'">
				充币记录
			</view>
			<view class="" @tap="type=3" :class="type=='3'&&'c-show'">
				互转记录
			</view>
		</view>
		<view class="fooler">
			<view class="fooler-title3">
				<view class="title3 title2" v-for="(item,index) in Currency" :key="index" >
					{{item.name}}
				</view>
			</view>
			<view class="fooler-title3" v-for="(item,index) in bilei" :key="index" style="line-height: 40rpx;padding: 20rpx 0rpx;">
				<view class="title3" style="display: block;">
					<!-- <view class="child" v-if="type!='4'">{{item.userName || item.withdrawAddress}}</view> -->
					<!-- <view class="childs">{{item.createTime}}</view> -->
					<view class="child">
						{{type=='1'?'提币':type=='2'?'充币':type=='4'?'会员':'互转'}}
					</view>
				</view>
				<view class="title3 text1">
				{{type!='4'?printer(item.amount):printer(item.totalPrice)}}
				</view>
				<view class="title3 text" v-if="type=='1'">{{stat(item.status)}}</view>
				<view class="title3 text" v-else style="color: #1677FF;">
				成功
				</view>
				<!-- 时间 -->
				<view class="title3 childs">{{item.createTime}}</view>
			</view>
			
		</view>
		<view class="swiper-text" v-if="bilei.length=='0'">
			<image src="../../static/wu.png" mode="aspectFit"/></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				main:[
					{
					   name:'提币',
					   cion:'/static/tb.png',
					   path:'./withdraw'
					},
					{
					   name:'充币',
					   cion:'/static/cb.png',
					   path:'./recharge'
					}
				],
				Currency:[
					{
						name:'类型',
					},
					{
						name:'数量',
					},
					{
						name:'状态',
					},
					{
						name:'时间',
					}
				],
				bilei:[],
				type:'1',
				page:1,
			}
		},
		computed:{
			stat(){
				return t=>{
					let data=t=='1'?'待审核':t=='2'?'审核通过':'提币成功'
					return data;
				}
			},
			printer(){
				return t=>{
					return this.util.decimal(t)
				}
			},
		},
		onLoad(options) {
			// this.type=JSON.parse(options.type)
			this.WithdrawList()
		},
		watch:{
			type(val){//1 提币 2 充币 3 转账
			    this.bilei=[]
			    this.page=1
				this.WithdrawList(val)
			}
		},
		methods: {
			WithdrawList(e){//1 提币 2 充币 3 转账 4 会员记录
				let mothds=this.type=='1'?'coinWithdraw/list':this.type=='2'?'coinRecharge/list':this.type=='3'?'vip/transferRecode':'vip/getVipOrderRecordByUid'
				mothds+=`?pageSize=20&page=${this.page}`
				this.request.post(mothds).then(res=>{
					if(res.data.code=='1'){
						console.log(res.data.data)
						let data=res.data.data
						for(let i=0;i<data.length;i++){
							if(data[i].addreses){//地址截取
							  data[i].addreses=data[i].userName.substring(0,5)+'...'+data[i].userName.substring(data[i].userName.length-3,data[i].userName.length);	
							}
						}
						this.bilei=data
					}
				})
			},
			nav(item){
				uni.navigateTo({
					url:item
				})
			},
			click(e){
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
// page{
// 	background: #FFFFFF;
// }
.hq{
	display: flex;
	// justify-content: space-between;
	padding-left: 30rpx;
	// background: #FFFFFF;
	// height: 110rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	line-height: 52px;
	color: #999;
	border-bottom: 1rpx solid $border;
	view{
		margin-right: 30rpx;
	}
	.c-show{
		font-size: 38rpx; 
		color: #333;
	}
}

.title{
	width: 100%;
	margin: 0rpx 20rpx 20rpx;
	.title-item{
		background-image: url('https://bydp.oss-cn-beijing.aliyuncs.com/course/1604042999714.png');
		background-size: 100%;
		background-repeat: no-repeat;
		width: 95%;
		height: 250rpx;
		border-radius: 20rpx;
	}
}
.list{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20rpx;
	.list-flex{
		display: flex;
		align-items: center;
		image{
			margin-right: 15rpx;
		width: 40rpx;
		height: 40rpx;
	}
	.list-name{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 60rpx;
		color: #333333;
	}
	}
	
}
.bar{
		// margin: 0rpx 20rpx;
		/deep/ .u-notice-bar{
			background: #fff !important; 
		}
		/deep/ .u-icon__icon{
			    color: #333333 !important;
		}
		/deep/ .u-notice-text{
			color: #333333 !important;
		}
	}
.fooler{
	padding: 20rpx;
	// margin-top: 20rpx;
	// background: #FFFFFF;
	.fooler-title3{
		display: flex;
		line-height: 70rpx;
		margin: 0rpx 20rpx;
		border-bottom: 1rpx solid $border;
		.title2{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
		}
		.title3{
			display: flex;
			align-items: center;
			
			
			.child{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.childs{
                font-size: 20rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
			}
		}
		
		.title3:nth-child(1){
			width: 15%;
		}
		.title3:nth-child(2){
			text-align: center;
			width: 20%;
		}
		.title3:nth-child(3){
			// text-align: right;
			justify-content: flex-end;
			width: 20%;
		}
		.title3:nth-child(4){
			text-align: right;
			justify-content: flex-end;
			width: 50%;
		}
	}
}
.text1{
	font-size: 28rpx;
	font-family: PingFang SC;
	// font-weight: bold;
	color: #333;
}
.text{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	// line-height: 36px;
	color: #666666;
}
.swiper-text{
		margin-top: 50rpx;
		// width: 100%;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 36rpx;
		color: #999999;
		image{
			width: 186rpx;
			height: 201rpx;
			margin-bottom: 20rpx
		}
	}
</style>
